<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id"
          :artobj="obj"
          @disLikeEV="ondisLikeFn"
          @reportEV="onreportFn"
          @click.native="itemClickFn(obj.art_id)"
        >
        </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from "../../../components/ArticleItem.vue";
import {
  getAllArticleListApi,
  postdislikeArticleApi,
  reportsArticleApi,
} from "@/api";
export default {
  components: {
    ArticleItem,
  },
  props: {
    // list: Array, //文章列表
    channelId: Number, //频道ID
  },
  data() {
    return {
      list: [], //文章列表
      thenTime: new Date().getTime(), //用于分页
      loading: false, //底部加载状态
      finished: false, //底部完成状态
      isLoading: false, //下拉刷新状态
    };
  },
  methods: {
    async getArticleListFn() {
      // console.log(this.channelId, "频道ID");
      const res = await getAllArticleListApi({
        channel_id: this.channelId,
        timestamp: this.thenTime,
      });
      // console.log(res, "0000");
      this.list = [...this.list, ...res.data.data.results];
      this.thenTime = res.data.data.pre_timestamp;

      this.loading = false; //如果不关闭，底部一直是加载中状态，下次触底会在触发onLoad
      if (res.data.data.pre_timestamp === null) {
        //本次回来的数据是最后，没有下一段数据了
        this.finished = true;
      }
      this.isLoading = false; //下拉加载状态改为false
    },

    // 底部加载事件方法
    onLoad() {
      if (this.list.length === 0) {
        return; //如果页面没有数据，没有高度，让本次onLoad逻辑代码不往下在执行
      }
      this.getArticleListFn();
      // console.log("底部刷新");
    },

    //下拉刷新加载方法
    onRefresh() {
      this.list = [];
      this.thenTime = new Date().getTime();

      this.getArticleListFn();
      // console.log("下拉刷新");
    },

    // 反馈不感兴趣
    async ondisLikeFn(id) {
      //try{}catch(err){}自己处理错误，内部throw就不会想控制台抛出打印错误，而是交给你的catch内自定义错误处理
      try {
        // console.log(id, "文章列表ID");
        const res = await postdislikeArticleApi({
          artId: id,
        });
        // console.log(res, "不感兴趣");
        Notify({ type: "success", message: "反馈成功" });
      } catch (err) {
        console.log("失败了");
      }
    },

    //反馈-垃圾内容
    async onreportFn(id, value) {
      console.log(id, "文章列表ID");
      const res = await reportsArticleApi({
        artId: id,
        type: value,
      });
      console.log(res, "举报垃圾信息");
      Notify({ type: "success", message: "举报成功" });
    },

    // 文章详情
    itemClickFn(id) {
      this.$router.push({
        path: `/delail?art_id=${id}`,
      });
    },
  },

  created() {
    // const add = await getAllArticleListApi({
    //   channel_id: this.channelId,
    //   timestamp: this.thenTime,
    // });
    // console.log(add, "文章列表");
    // this.list = add.data.data.results;
    // this.thenTime = add.data.data.pre_timestamp;
    this.getArticleListFn();
  },
};
</script>

<style>
</style>